<script>
/**
 * 盒子
 *  */
import {
  defineComponent,
  ref,
  getCurrentInstance,
  reactive,
  toRef,
  computed,
  onMounted,
  onActivated,
  watch,
} from 'vue';
import EchartContainer from '@/components/echartContainer.vue';
import * as echarts from 'echarts';

export default defineComponent({
  components: {
    EchartContainer,
  },
  props: {
    dataInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const EchartContainerRef = ref(); //组件实例
    const dataContainer = reactive({
      loading: false,
    });
    watch(
      [toRef(props, 'dataInfo')],
      () => {
        return;
        let dataInfo = props.dataInfo.data || [];
      },
      {
        immediate: true,
      },
    );
    onMounted(() => {
      if (!EchartContainerRef.value) return;
      let option = {
        tooltip: {},
       
        legend: {
          itemGap: 50,
          
          textStyle: {
            color: '#f9f9f9',
            borderColor: '#fff',
          },
        },

        series: [
          {
            name: '功率',
            type: 'pie',
            radius: ['40%', '60%'],
            //  center: ['25%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '当前储热容量' },
              { value: 735, name: '剩余储热容量' },

            ],
            itemStyle: {
              borderColor: '#fff', // 边框颜色
              borderWidth: 0, // 边框宽度
              color: function (params) {
                // 自定义渐变色
                const colorList = [
                  new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      { offset: 1, color: '#96fab8' }, // 起始颜色
                      { offset: 1, color: '#070934' }, // 结束颜色

                    ]
                  ),
                  new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      { offset: 1, color: '#5094f8' },
                      { offset: 1, color: '#05CFF8' }
                    ]
                  ),


                ];
                return colorList[params.dataIndex];
              },
            }
          },
         
        ],
      };

      /** 初始化图表 */
      EchartContainerRef.value.initData(option);
    });
    return {
      dataContainer,
      EchartContainerRef,
    };
  },
});
</script>

<template>
  <div class="pancake">
      <EchartContainer ref="EchartContainerRef"></EchartContainer>
  </div>
</template>

<style lang="scss" scoped>
.pancake {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    
    .borderRa {
        position: absolute;
        width: 4.688rem;
        height: 4.688rem;
        border-radius: 50%;
        background: linear-gradient(180deg, #1dacc8, #2b3c4a);
        // border-image: linear-gradient(180deg, rgba(166, 206, 255, 0), rgba(166, 206, 255, 0.3), rgba(166, 206, 255, 0)) 1 1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 0.750rem;
        text-align: center;
        p:nth-child(1) {
            margin-top: 1.250rem;
            font-weight: bold;
        }
    }
}
</style>
